<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import useDataStore from "../stores/Data";
import type { TabsPaneContext } from 'element-plus';
import { useRoute } from "vue-router";
import { ElTabs, ElTabPane } from 'element-plus'

interface IHomeDataItem {
    mainDesignerUserName: string;
    choosedCount: string;
    courseType: string;
}

const homeData = computed<IHomeDataItem[]>(() => useData.theHome);
const detailData = computed(() => useData.theDetail);
const textarea = ref('')
const input = ref('')
const useData = useDataStore()
const route = useRoute();
const showSearch = ref(false);
const activeName = ref('first');
const value1 = ref(false)
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event);
};
const tableData = computed(() => {
    return homeData.value.map((item: IHomeDataItem) => ({
        name: item.mainDesignerUserName,
        number: item.choosedCount,
        class: item.courseType
    }));
});

onMounted(async () => {
    try {
        const corId = route.query.corId;
        await useData.getHomeData();
        await useData.getDetailData(Number(corId));
        await useData.getQuestionData(Number(corId));

        if (useData.theDetail && useData.theQuestion) {
        } else {
            console.error('Data not loaded for corId:', corId);
        }
    } catch (error) {
        console.error('Error in mounted hook:', error);
    }
});
</script>

<template>
    <div class="header0">
        <div class="photo0">
            <div>
                <span class="shouye0">首页/课程详细</span>
            </div>
            <h1 class="people0">
                {{ detailData.name }}(已选{{ detailData.choosedNum }}人)
            </h1>
            <div class="all0" style="display: flex;">
                <div class="left0">
                    <img src="https://codelover.club/icons/course/icon1.svg" alt="touxiang"
                        style="width: 40px;border-radius: 20px;right: -100px;position: relative;top: 130px;">
                </div>
                <div class="right0">
                    <div class="teacher0">
                        <h4>{{ detailData.tutorStaffUserName }}</h4>
                    </div>
                    <div class="jiaoshi0">
                        <h4 style="background-color: burlywood;width: 40px;">教师</h4>
                    </div>
                    <div class="jiaoshi2">
                        <h3 style="background-color: burlywood;width: 75px;">课程成绩</h3>
                    </div>
                </div>
            </div>
            <div class="dao0">
                <div class="d0">
                    <span class="kp1" style="font-size: 20px;">已学 80 %</span>
                    <br>
                    <el-progress :text-inside="true" :stroke-width="26" :percentage="80"
                        style="width: 280px;height: 20px;top: 10px;" />
                    <br>
                    <span class="kp1" style="font-size: 12px;">已学:8 在学:2 待学:0</span>
                    <br>
                    <button class="ksearch-icon1">继续学习</button>
                </div>
            </div>
            <div class="kadanmu">
                <el-switch class="kanniu" v-model="value1" />
                <span class="kdanmu">关闭弹幕</span>
            </div>
        </div>
        <div class="container0">
            <el-tabs v-model="activeName" class="kdemo-tabs1" @tab-click="handleClick">
                <el-tab-pane label="任务" name="first">
                    <div class="content0">
                        <div class="khe">
                            <p>简介：{{ detailData.name }}</p>
                            <br>
                            <p>课程目标： {{ detailData.courseData?.goal }}</p>
                        </div>
                    </div>


                </el-tab-pane>
                <el-tab-pane label="问答³" name="second">
                    <div class="kwen">
                        <el-button style="position: absolute;top: 30px;" @click="showSearch = !showSearch"
                            type="primary">我要提问</el-button>
                        <div v-if="showSearch">
                            <el-input v-model="input" style="width: 1050px;left: 120px;top: 30px;"
                                placeholder="请输入标题" />
                            <br>
                            <br>
                            <el-input v-model="textarea" style="width: 1050px;left: 120px;top: 60px" :rows="4"
                                type="textarea" placeholder="输入问题详细~" />
                            <el-button type="primary"
                                style="left: 10px;bottom: 100px;position: absolute;">发表</el-button>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="进度榜" name="third" style="height: 450px;width: 1250px;overflow-y: scroll;">
                    <div class="kjindu" v-if="tableData.length > 0">
                        <el-table :data="tableData" :default-sort="{ prop: 'number', order: 'descending' }"
                            style="width: 100%">
                            <el-table-column prop="name" label="姓名" width="180" />
                            <el-table-column prop="class" label="现状" sortable width="180" />
                            <el-table-column prop="number" label="学号" sortable />
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="投票榜" name="fourth">
                    <div class="yinying0">
                        <div class="button-group0">
                            <div class="content2">
                                <p class="piao0">{{ detailData.name }}期末作品投票
                                    <el-button class="kp88" type="primary">投票</el-button>
                                    <el-button class="kp88" type="primary">排名</el-button>
                                </p>
                            </div>
                        </div>
                        <br>
                        <hr>
                        <br>
                        <div class="zi0">
                            <p>
                                简介:{{ detailData.name }}期末作品投票,其中评审评分占50%,同学评分占50%
                            </p>
                            <p>
                                投票时间:4年5月15日 0:00:00结束时间:2024年5月20日 0:00:00
                            </p>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<style scoped>
.shouye0 {
    left: 100px;
    top: 40px;
    position: absolute;
    color: white;
}

.people0 {
    left: 100px;
    top: 70px;
    position: absolute;
    color: white;
}

.teacher0 {
    width: 300px;
    left: 160px;
    top: 125px;
    position: absolute;
    color: white;
}

.jiaoshi0 {
    left: 160px;
    top: 155px;
    position: absolute;
    color: white;
}

.jiaoshi2 {
    left: 240px;
    top: 145px;
    position: absolute;
    color: white;
}

.container0 {
    position: absolute;
    top: -40px;
    width: 100%;
    padding: 30px;
}

.all0 {
    position: absolute;
}

.header0 {
    position: absolute;
    top: 5%;
    left: 0%;
    width: 100%;
    height: 100%;
}

.photo0 {
    position: absolute;
    height: 200px;
    width: 100%;
    background-image: url(https://codelover.club/static/img/courseBg.43bcf71c.png);
}

.search-icon {
    background-color: rgb(219, 66, 191);
    border: none;
    border-radius: 20px;
    color: white;
    width: 50px;
    height: 30px;
}

.content0 {
    color: black;
    padding: 20px;
    border: 1px #f1ecec solid;
    box-shadow: 0 8px 16px 0 rgba(7, 23, 39, .1);
    width: 100%;
}

.kdemo-tabs1 {
    position: relative;
    top: 250px;
    height: 300px;
    width: 100%;
}

.kdemo-tabs1>.el-tabs__content {
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.dao0 {
    position: absolute;
    border: 3px #fbf7f7 solid;
    width: 360px;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px 20px 20px 20px;
    left: 60%;
    box-shadow: 0 8px 16px 0 rgba(7, 23, 39, .1);
    top: 15%;
    background-color: #fff;
}

.ksearch-icon1 {
    position: relative;
    background-color: rgb(239, 129, 50);
    border: none;
    border-radius: 20px;
    color: white;
    width: 250px;
    height: 40px;
    top: 15px;
    left: 16px;
}

.yinying0 {
    width: 100%;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px #f1ecec solid;
    box-shadow: 0 8px 16px 0 rgba(7, 23, 39, .1);
}

.kp88 {
    position: relative;
    left: 30px;
}

.content0:hover {
    transition: all 0.5s;
    transform: perspective(50px) translateZ(1px);
}

.kwen {
    height: 300px;
    width: 100%;
}

.kanniu {
    position: absolute;
    top: 230px;
    right: 100px;
}

.kdanmu {
    right: 30px;
    top: 234px;
    position: absolute;
    color: black;
}

.khe {
    width: 800px;
    height: 80px;
}
</style>
